import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, Tabs, Card, Tag, SearchBar } from 'antd-mobile';
import { LeftOutline } from 'antd-mobile-icons';
import styles from './CampusNews.module.css';

function CampusNews() {
  const navigate = useNavigate();
  const [searchValue, setSearchValue] = useState('');

  const handleBack = () => {
    navigate(-1);
  };

  // 模拟新闻数据
  const newsData = {
    latest: [
      {
        id: 1,
        title: '武汉大学2024年春季学期开学典礼隆重举行',
        summary: '2024年春季学期开学典礼在梅园小操场隆重举行，校长张平文院士发表重要讲话...',
        category: '学校要闻',
        date: '2024-02-26',
        views: 1520,
        image: '🎓',
        hot: true
      },
      {
        id: 2,
        title: '我校在国际顶级期刊发表重要研究成果',
        summary: '生命科学学院团队在《Nature》杂志发表关于基因编辑技术的突破性研究...',
        category: '科研动态',
        date: '2024-02-25',
        views: 980,
        image: '🔬',
        hot: false
      },
      {
        id: 3,
        title: '武汉大学樱花季即将开启，预约通道正式开放',
        summary: '一年一度的樱花季即将到来，学校发布樱花观赏预约指南，游客可通过官方平台预约...',
        category: '校园生活',
        date: '2024-02-24',
        views: 2340,
        image: '🌸',
        hot: true
      },
      {
        id: 4,
        title: '2024年度国家自然科学基金项目申报工作启动',
        summary: '科学技术发展研究院发布通知，2024年度国家自然科学基金项目申报工作正式启动...',
        category: '通知公告',
        date: '2024-02-23',
        views: 756,
        image: '📋',
        hot: false
      }
    ],
    academic: [
      {
        id: 5,
        title: '计算机学院举办人工智能前沿技术学术报告会',
        summary: '邀请国内外知名专家学者，围绕人工智能、机器学习等前沿技术进行深入交流...',
        category: '学术活动',
        date: '2024-02-22',
        views: 890,
        image: '🤖',
        hot: false
      },
      {
        id: 6,
        title: '经济与管理学院承办国际经济学术研讨会',
        summary: '来自全球20多个国家的经济学专家齐聚武大，共同探讨全球经济发展趋势...',
        category: '学术活动',
        date: '2024-02-21',
        views: 654,
        image: '📈',
        hot: false
      }
    ],
    campus: [
      {
        id: 7,
        title: '学生社团文化节精彩纷呈',
        summary: '各学生社团展示特色文化，为师生带来丰富多彩的文化盛宴...',
        category: '校园文化',
        date: '2024-02-20',
        views: 1230,
        image: '🎭',
        hot: false
      },
      {
        id: 8,
        title: '图书馆推出24小时自习室服务',
        summary: '为满足学生学习需求，图书馆新增24小时自习室，提供更便利的学习环境...',
        category: '服务公告',
        date: '2024-02-19',
        views: 1890,
        image: '📚',
        hot: true
      }
    ]
  };

  const handleNewsClick = (news) => {
    // 这里可以跳转到新闻详情页
    console.log('点击新闻:', news.title);
  };

  const renderNewsList = (newsList) => {
    return newsList.map((news) => (
      <Card 
        key={news.id} 
        className={styles.newsCard}
        onClick={() => handleNewsClick(news)}
      >
        <div className={styles.newsContent}>
          <div className={styles.newsImage}>
            <div className={styles.newsIcon}>{news.image}</div>
          </div>
          <div className={styles.newsInfo}>
            <div className={styles.newsHeader}>
              <h3 className={styles.newsTitle}>
                {news.title}
                {news.hot && <span className={styles.hotTag}>热门</span>}
              </h3>
              <Tag className={styles.categoryTag} color={getCategoryColor(news.category)}>
                {news.category}
              </Tag>
            </div>
            <p className={styles.newsSummary}>{news.summary}</p>
            <div className={styles.newsFooter}>
              <span className={styles.newsDate}>{news.date}</span>
              <span className={styles.newsViews}>👁 {news.views}</span>
            </div>
          </div>
        </div>
      </Card>
    ));
  };

  const getCategoryColor = (category) => {
    const colorMap = {
      '学校要闻': '#1890ff',
      '科研动态': '#52c41a',
      '校园生活': '#fa8c16',
      '通知公告': '#722ed1',
      '学术活动': '#13c2c2',
      '校园文化': '#eb2f96',
      '服务公告': '#faad14'
    };
    return colorMap[category] || '#666';
  };

  return (
    <div className={styles.container}>
      {/* 导航栏 */}
      <NavBar 
        onBack={handleBack}
        backIcon={<LeftOutline />}
        className={styles.navbar}
      >
        校内新闻
      </NavBar>

      {/* 搜索栏 */}
      <div className={styles.searchContainer}>
        <SearchBar
          placeholder="搜索新闻..."
          value={searchValue}
          onChange={setSearchValue}
          className={styles.searchBar}
        />
      </div>

      {/* 主要内容 */}
      <div className={styles.content}>
        <Tabs className={styles.tabs}>
          <Tabs.Tab title="最新动态" key="latest">
            <div className={styles.newsList}>
              {renderNewsList(newsData.latest)}
            </div>
          </Tabs.Tab>
          <Tabs.Tab title="学术科研" key="academic">
            <div className={styles.newsList}>
              {renderNewsList(newsData.academic)}
            </div>
          </Tabs.Tab>
          <Tabs.Tab title="校园生活" key="campus">
            <div className={styles.newsList}>
              {renderNewsList(newsData.campus)}
            </div>
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  );
}

export default CampusNews;